<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员管理系统</title>
    <style>
        .main {
            width: 80%;
            margin: 0 auto;
            text-align: center
        }

        h2 a {
            margin-right: 15px;
            color: darkcyan;
            text-decoration: none
        }

        h2 a:hover {
            color: crimson;
            text-decoration: underline
        }

        h2 a:last-child {
            margin-right: 0
        }

        .current {
            color: #f8ab0a
        }
        .red{color: red}
        #loading{display: none}
    </style>
</head>
<body>
<script src="js/jq.js"></script>
<div class="main">
    <?php include_once 'nav.php';?>
    <form action="postRegister.php" method="post" onsubmit="return check()">
        <table align="center" width="100%" border="1" bordercolor="gray" cellspacing="0" cellpadding="10"
               style="border-collapse: collapse">
            <tr>
                <td align="right">用户名</td>
                <td align="left"><input id="username" name="username" class="username"> <!--onfocus="this.select()"--><span class="red">*</span> <span id="usernameMsg"></span><img id="loading" src="img/loading.gif" width="100"></td>

            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left"><input id="pw" type="password" name="pw"><span class="red">*</span></td>
            </tr>
            <tr>
                <td align="right">确认密码</td>
                <td align="left"><input id="cpw" type="password" name="cpw"><span class="red">*</span></td>
            </tr>
            <tr>
                <td align="right">邮箱</td>
                <td align="left"><input id="email" name="email"></td>
            </tr>


            <tr>
                <td align="right"><input disabled type="submit" id="submit" value="提交"></td>
                <td align="left"><input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>
</div>
<script>
    let loading = 0;
    $(function (){
        //绑定事件
        $("#username").blur(
            function (){
            let username = $("#username").val().trim();
            let usernameReg = /^[a-zA-Z0-9]{3,10}$/; //支持大小写字母，数字，长度为3至10个字符
            if(!usernameReg.test(username)){
                alert('用户名必填，且只能是大小字字符和数字构成，长度为3-10个字符');
                return;
            }
            //使用ajax异步请求去后端查询当前用户名是否有效
            if(loading == 1){
                return;
            }
            $.ajax({
                url:'checkUsername.php',
                data:{username:username},
                dataType:'json',
                type:'post',
                success:function (data){
                    if(data.error == 1){
                        $("#usernameMsg").html('此用户名不可用');
                        //将提交按钮变灰
                        $("#submit").attr("disabled",'true');
                    }
                    else{
                        $("#usernameMsg").html('');
                        //将提交按钮使能
                        $("#submit").removeAttr("disabled");
                    }
                },
                complete:function (){
                    $("#loading").hide();
                    loading = 0;
                },
                error:function (){
                    alert('网络错误');
                },
                beforeSend:function (){
                    loading = 1;
                    $("#loading").show();
                }
            })
        }).focus(
            function (){
                $(this).select();
            }
        )

    })
    function check(){
        let username = $("#username").val().trim();
        let pw = $("#pw").val().trim();
        let cpw = $("#cpw").val().trim();
        let email = $("#email").val().trim();
       /* let username = document.getElementsByName('username')[0].value.trim();
        let pw = document.getElementsByName('pw')[0].value.trim();
        let cpw = document.getElementsByName('cpw')[0].value.trim();
        let email = document.getElementsByName('email')[0].value.trim();*/
        //使用正则表达式来进行用户名验证
        let usernameReg = /^[a-zA-Z0-9]{3,10}$/; //支持大小写字母，数字，长度为3至10个字符
        if(!usernameReg.test(username)){
            alert('用户名必填，且只能是大小字字符和数字构成，长度为3-10个字符');
            return false;
        }
        //使用正则表达式来进行密码的验证
        let pwReg = /^[a-zA-Z0-9_*]{6,10}$/;
        if(!pwReg.test(pw)){
            alert('密码必填，且只能是大小字符和数字，以及*、_构成，长度为6-10个字符');
            return false;
        }
        else{
            if(pw !== cpw){
                alert('密码和确认密码必须相同！');
                return false;
            }
        }
        if(email.length > 0){
            let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-z0-9]+\.)+(com|cn|net|org)$/;
            if(!emailReg.test(email)){
                alert('邮箱格式不正确！');
                return false;
            }
        }


    }
</script>
</body>
</html>